<template>
  <div class="container">
    <el-row type="flex" justify="space-between">
      <div class="meus-wrapper">
        <!-- 菜单列表 -->
        <PostMenus 
        @getContent="getContent"/>
        <!-- 推荐城市 -->
        <div class="aside-recommend">
          <h4 class="aside-title">推荐城市</h4>
          <a href="#" class="aside-recommend-item">
            <img
              src="http://157.122.54.189:9093/images/pic_sea.jpeg"
              alt
            />
          </a>
        </div>
      </div>
      <div class="post-wrapper">
        <!-- 搜索框 -->
    <div class="search-wrapper" >
          <el-row class="search-bar" type="flex" justify="space-between" align="middle">
            <input type="text"  
            v-model="inputContent" 
            @keyup.enter="handleSearch"
            placeholder="请输入想去的地方，比如：'广州'" />
            <i class="el-icon-search"
            @click="handleSearch"
            ></i>
          </el-row>
          <div class="search-recommend">
            <span>推荐:</span> 
            <div 
             class="change"
             v-for="(item,index) in recommendData"  
            :key="index">
            <nuxt-link :to="`/post?city=${item}`">
            <span  @click="recommendCity(index)">
           {{item}}
           </span>
          </nuxt-link>
          </div>
          </div>
        </div>
        <!-- 标题 -->
        <el-row class="post-title" type="flex" justify="space-between" align="middle">
          <h4>推荐攻略</h4>
          <el-button type="primary" @click="$router.push({path:'post/writePost'})">
            <i class="el-icon-edit"></i>
            <span >写游记</span>
          </el-button>
        </el-row>
        <!-- 列表内容 -->
        <div v-if="datalist.length>0">
        <postlist 
        v-for="(item,index) in datalist" 
        :key="index" 
        :postlist_content="item"
         />
         </div>
         <div v-else>
           暂无信息
         </div>
        <!-- 分页 -->
         <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[3, 6, 9, 12]"
          :page-size="3"
          :total="PostList.length"
          layout="total, sizes, prev, pager, next, jumper"
        />
      </div>
    </el-row>
  </div>
</template>

<script>
import PostMenus from "@/components/post/menus";
import postlist from "@/components/post/postlist"
export default {
  components: {
    PostMenus,
    postlist
  },
  data(){
    return{
       PostList:[],
       inputContent:"",
       recommendData:['广州','上海','北京'],
       currentPage: 1, // 当前页
       currentPageSize: 3, 
    }
  },
  computed:{
    datalist(){
       const start = (this.currentPage - 1) * this.currentPageSize
      // 列表结束的索引
      let end = start + this.currentPageSize
      return this.PostList.slice(start, end)
    }
  },
   watch:{
    $route(){
      this.inputContent=this.$route.query.city
      this.$router.push({
        path:"/post",
        query:{
          city: this.inputContent
        }
      })
      this.loadPage()
    }
  }, 
  mounted(){
     console.log(this.$route);
     const query = {
       _currentPage: this.currentPage,
       _currentPageSize: this.currentPageSize,
    };
     
    if (this.$route.query.city) {
       query.city = this.$route.query.city;
    }
    this.$router.push({
      path: "/post",
      query
    });
   this.loadPage()
  },
  methods:{
    loadPage(){
      const params={}
      if(this.$route.query.city){
        params.city=this.$route.query.city
      }
       this.$axios({
      url:"/posts",
      params
    }).then(res=>{
        console.log(res);
        this.PostList=res.data.data      
        console.log(this.PostList);       
      
    })
    },
    getContent(city) {
      this.inputContent = city;
      this.$router.push({
        path: "/post",
        query: {
         
          city: this.inputContent
        }
      });
    },
    handleSearch(){
         console.log("按下了");      
        if (this.inputContent && this.PostList) {
       /*    console.log("处理"); */          
        this.$router.push({
          path: "/post",
          query: {
           city: this.inputContent
          }
        });
      }
    },
    recommendCity(index){
    this.inputContent=this.recommendData[index]
    },
    
    //显示条数
      handleSizeChange (currentPageSize) {
      console.log(currentPageSize)
      this.currentPageSize = currentPageSize
    },
    //当前页数
    handleCurrentChange (currentPage) {
      console.log(currentPage)
      this.currentPage = currentPage
    },
 
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 1000px;
  margin: 0 auto;
  padding: 20px 0;
}
.meus-wrapper {
  position: relative;
  width: 260px;
  z-index: 2;
  .aside-recommend {
    margin-top: 20px;
    .aside-title {
      font-weight: 400;
      padding-bottom: 10px;
      border-bottom: 1px solid #ddd;
      margin-bottom: 10px;
    }
    .aside-recommend-item {
      img {
        width: 100%;
        display: block;
      }
    }
  }
}
.post-wrapper {
  width: 700px;
  .search-wrapper {
    .search-bar {
      width: 100%;
      box-sizing: border-box;
      height: 40px;
      line-height: 40px;
      border: 3px solid orange;
      input {
        flex: 1;
        padding: 0 20px;
        line-height: 40px;
        outline: none;
        border: none;
        background: none;
      }
      i {
        font-size: 24px;
        color: orange;
        font-weight: 700;
        margin-right: 10px;
       &:hover{
         cursor: pointer; 
        }  
      }
    }
    .search-recommend {
      padding: 10px 0;
      font-size: 12px;
      color: #666;
      display: flex;
      span {
        margin-right: 5px;
      }
      .change{
        cursor: pointer;      
       &:hover{
          color:orange;
         border-bottom: 1px solid orange;
        }
      }
    }
  }
  .post-title {
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    position: relative;
    h4 {
      font-weight: 400;
      font-size: 18px;
      color: orange;
      &:after {
        display: block;
        content: "";
        width: 72px;
        height: 2px;
        background: orange;
        position: absolute;
        bottom: 0;
        left: 0;
      }
    }
  }
}
</style>